<template>
	<view class="timeLine-view">
		<view class="timeView" v-for="(item,index) in dataArr" :key="index">
			<view class="timeView1">
				<view class="yuan"></view>
				<view class="wLine" :class="index==0?'':'topBline'"></view>
				<view class="bline" v-if="index<dataArr.length-1"></view>
				<text class="value1" style="margin-left: 50rpx;line-height: 40rpx;">{{item.date}}</text>
				<text class="value1">{{item.name}}</text>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		props: {
           dataArr:{
			   type:Array,
			   default:()=>[]
		   }
		},
		data() {
			return {
				// dataArr: ['老刘', '老刘', '老刘', '老刘', '老刘']
			}
		},
	}
</script>

<style lang="scss">
	.timeLine-view{
		width: 100%;
		// padding: 0 30upx;
		box-sizing: border-box;
		padding-bottom: 20upx;
	}
	.timeView{
		display: flex;
		/* align-items: center; */
		// flex-direction: column;
		/* justify-content: space-between; */
		align-items: center;
		width: 100%;
		position: relative;
		height: 60rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	.timeView1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		position: relative;	
	}
	.yuan{
		background: #fff;
		height: 22rpx;
		width: 22rpx;
		// border: 1px solid #5EC4CA;
		background-color: #0A77DE;
		border-radius: 50%;
		position: absolute;
		z-index: 9;
	}
	.bline{
		position: absolute;
		z-index: 8;
		background: #0A77DE;
		width: 1px;
		top: 50%;
		height: 50%;
		left: 11rpx;
	}
	.wLine{
		position: absolute;
		z-index: 8;
		background: #fff;
		width: 1px;
		top: 0;
		height: 50%;
		left: 11rpx;
	}
	.topBline{
		background:  #0A77DE;
	}
	.dian{
		background: #0A77DE;
		height: 16rpx;
		width: 16rpx;
		border-radius: 8rpx;
	}
	.value1{
		color: #333;
		font-size: 28upx;
	}
</style>
